<template>
  <div class="personal">
    <el-tabs type="border-card" v-model="activeTab" @tab-click="handleClick">
      <el-tab-pane label="我发布的任务" name="myTask">
          <el-table
              :data="myTaskList"
              style="width: 100%"
              align="center"
              stripe
              >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="创建时间:">
                      <span>{{ props.row.createTime }}</span>
                    </el-form-item>
                    <el-form-item v-if="props.row.acceptUser" label="接收人:">
                      <span>{{ props.row.acceptUser.userName}}</span>
                    </el-form-item>
                    <el-form-item label="任务内容:">
                      <span>{{ props.row.taskContent }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column
                label="任务名称"
                prop="taskName"  >
              </el-table-column>
              <el-table-column
                align="center"
                label="佣金"
                prop="taskMoney">
              </el-table-column>
              <el-table-column
                align="center"
                label="任务状态"
                prop="taskState">
              </el-table-column>


              <el-table-column
                align="center"
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" circle></el-button>
                  <el-button type="success" icon="el-icon-check" circle></el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                @current-change="currentPagechange"
                :total="page.total"
                :page-size="page.size"
                :current-page="page.current">
              </el-pagination>
            </div>
      </el-tab-pane>






      <!-- 我接受的任务 -->
      <el-tab-pane label="我接受的任务" name="acceptTask">
          <el-table
              :data="acceptTaskList"
              style="width: 100%"
              align="center"
              stripe
              >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="创建时间:">
                      <span>{{ props.row.createTime }}</span>
                    </el-form-item>
                    <el-form-item v-if="props.row.acceptUser" label="接收人:">
                      <span>{{ props.row.acceptUser.userName}}</span>
                    </el-form-item>
                    <el-form-item label="任务内容:">
                      <span>{{ props.row.taskContent }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column
                label="任务名称"
                prop="taskName"  >
              </el-table-column>
              <el-table-column
                align="center"
                label="佣金"
                prop="taskMoney">
              </el-table-column>
              <el-table-column
                align="center"
                label="任务状态"
                prop="taskState">
              </el-table-column>


              <el-table-column
                align="center"
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" circle></el-button>
                  <el-button type="success" icon="el-icon-check" circle></el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                @current-change="currentPagechange"
                :total="page.total"
                :page-size="page.size"
                :current-page="page.current">
              </el-pagination>
            </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {getMyTask} from '../../api/task.js'
export default {
  data () {
    return {
      userId:this.$store.getters.user.userId,
      acceptUserId:this.$store.getters.user.userId,
      activeTab: 'myTask',
      page: {
        current:1,
        size:5
      },
      myTaskList:[
        {
          acceptUser:{}
        }
      ],
      acceptTaskList:[]
    }
  },
  methods: {
    handleClick(e){
      this.getTaskList(e.index);
    },
    //获取我的任务列表
    getTaskList(activeIndex){
      if(activeIndex==='0'){
        console.log("当前点击:0")
        getMyTask(this.page,this.userId).then(res=>{
          this.myTaskList=res.data.records
          this.page=res.data
        })
      }else if(activeIndex==='1'){
        console.log("当前点击:1")
        getMyTask(this.page,0,this.acceptUserId).then(res=>{
          this.acceptTaskList=res.data.records
          this.page=res.data
        })
      }
    },
    //换页
    currentPagechange(){

    }
  },
  created () {
    this.getTaskList('0');
  }
}
</script>
<style scoped="scoped">
  .personal{
    width: 100%;
    border: 1px solid transparent;\
    height: 100%;
  }
  .el-tabs{
    width: 70%;
    /* margin: 30px auto; */
    height: 100%;
    margin: 10px auto;
  }
  li{
    list-style: none;
    width: 100%;
    height: 100%;
  }
  .info{
    margin-bottom: 15px;
  }
  .info span{
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .pagination{
    text-align: center;
  }
</style>
